<!--
  ~ Copyright 2022 Scheer PAS Schweiz AG
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  imitations under the License.
  -->

<ng-container *ngIf="plans.length > 0">
  <h2 class="primary mt-rem-3">{{ 'API_DETAILS.PLANS' | translate }}</h2>
</ng-container>
<div id="plan-grid">
  <ng-container *ngFor="let plan of plans">
    <div id="plan-card-{{ plan.planName }}" class="plan-card mat-elevation-z2">
      <div class="card-header">
        <div class="card-header-title primary text-big1">
          <span
            id="plan-card-{{ plan.planName }}-title"
            matTooltip="Visibility: {{ plan.discoverability }}"
            matTooltipPosition="above"
            [matTooltipDisabled]="(loggedIn$ | async) === false"
            >{{ plan.planName }}</span
          >
        </div>
        <div class="card-header-content">{{ plan.planDescription }}</div>
      </div>
      <div class="card-content" [ngSwitch]="plan.planId + ':' + plan.version">
        <mat-list>
          <ng-container
            *ngIf="plan.planPolicies.length > 0; else unlimitedPolicies">
            <mat-list-item *ngFor="let policy of plan.planPolicies">
              <p>
                {{ policy.shortName }}
              </p>
              <app-rate-quota-policy-short-limit
                [policy]="policy"
                [bold]="false"></app-rate-quota-policy-short-limit>
            </mat-list-item>
          </ng-container>
          <ng-template #unlimitedPolicies>
            <mat-list-item *ngFor="let defaultPolicy of defaultPolicies">
              <p>{{ defaultPolicy }}</p>
              <app-rate-quota-policy-short-limit
                [bold]="false"></app-rate-quota-policy-short-limit>
            </mat-list-item>
          </ng-template>
        </mat-list>
      </div>
      <div class="plan-card-actions">
        <div>
          <mat-divider></mat-divider>
          <button
            id="sign-up-btn"
            *ngIf="apiVersion.status === 'Published'"
            class="sign-up-button"
            mat-raised-button
            color="primary"
            (click)="onSignUp(plan)">
            {{ 'API_DETAILS.SIGN_UP' | translate }}
          </button>
        </div>
      </div>
    </div>
  </ng-container>
</div>
